<template>
  <view class="page">
    <Nav
      title="水源信息"
      color="linear-gradient(180deg,#00a3ff 0%,#00beff 16%,#00cafe 33%, #68dcfe 53%,#ffffff 100%)"
    ></Nav>
    <view class="main">
      <view class="main-area">
        <view class="input">
          <view class="input-title">水源名称</view>
          <input class="input-put" placeholder="输入" />
        </view>
        <view class="lon-and-lat">
          <view class="lon-and-lat-input">
            <view class="input-title">经度</view>
            <input class="input-put" placeholder="" />
          </view>
          -
          <view class="lon-and-lat-input">
            <view class="input-title">纬度</view>
            <input class="input-put" placeholder="" />
          </view>
          <button class="location">
            <image
              class="location-icon"
              :src="require('@/static/img/location-icon.png')"
            ></image
            >GPS定位
          </button>
        </view>
        <view class="input">
          <view class="input-title">面积信息</view>
          <input class="input-put" placeholder="输入(单位m²）" />
        </view>
        <view class="input">
          <view class="input-title">水源地址</view>
          <input class="input-put" placeholder="输入" />
        </view>
      </view>
      <view class="main-area2">
        <image
          style="width: 100%"
          src="https://img1.baidu.com/it/u=957117480,293545790&fm=253&fmt=auto&app=138&f=JPG?w=889&h=500"
          mode="widthFix"
        />
      </view>
      <view class="btn-box">
        <button class="btn">
          <text class="btn-text" style="color: #fff">添加绘制</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import Nav from "@/components/nav.vue";
export default {
  components: {
    Nav,
  },
  data() {
    return {};
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  background: #f6f6f6;
  min-height: 100vh;
  padding-bottom: 80rpx;
}

.main-area {
  margin-bottom: 18rpx;
  background: #fff;
  padding: 0 30rpx 10rpx;
}
.input,
.lon-and-lat-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25rpx;
  border-radius: 18rpx;
  border: 1px solid #e9e9e9;
  margin-bottom: 18rpx;
  &-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #202020;
    margin-right: 30rpx;
  }
  &-put {
    flex: 1;
    font-size: 26rpx;
    color: #202020;
  }
}
.lon-and-lat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18rpx;

  &-input {
    width: 210rpx;
    margin-bottom: 0;
  }
}
.location {
  width: 191rpx;
  height: 88rpx;
  background: #00beff;
  border-radius: 18rpx;
  align-items: center;
  font-size: 26rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-weight: bold;
  color: #ffffff;
  &-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    // margin-bottom: 10rpx;
  }
}
.main-area2 {
  padding: 44rpx 30rpx;
  background: #ffffff;
}
.btn-box {
  width: 100%;
  position: fixed;
  bottom: 50rpx;
}
.btn {
  width: 697rpx;
  background: #00beff;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
